<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>transform</title>
	<style type="text/css">
		body{
			background: #222;
		}
		.cardfan{
			width: 300px;
			height: 200px;
			margin: 2rem auto;
		}
		.cardfan > img{
			position: absolute;
			border: 10px solid #fff;
			box-sizing: border-box;
			box-shadow: 4px 4px 3px rgba(0,0,0,0.2);
			transform-origin: center 400px;
			transition: transform .7s ease;
		}
		.cardfan img:first-child{
			transform:rotate(5deg);
		}
		.cardfan img:last-child{
			transform:rotate(-5deg);
		}
		.cardfan:hover img:first-child{
			transform:rotate(25deg);
		}
		.cardfan:hover img:last-child{
			transform:rotate(-25deg);
		}
	</style>
</head>
<body>
	<div class="cardfan">
		<img src="../img/onepiece.jpg" alt="" width="300px" height="200px">
		<img src="../img/伊布.jpg" alt="" width="300px" height="200px">
		<img src="../img/路飞.jpg" alt="" width="300px" height="200px">
	</div>
</body>
</html>